/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

@import './reset';
@import 'ember-basic-dropdown';
@import 'ember-power-select';
@import '@hashicorp/design-system-components';
@import './core';

@mixin font-face($name) {
  @font-face {
    font-family: $name;
    src: url('/ui/fonts/#{$name}.woff2') format('woff2'), url('/ui/fonts/#{$name}.woff') format('woff');
  }
}

@include font-face('obscure');
// Font comes from npm package: https://www.npmjs.com/package/text-security
// We took the font we wanted and moved it into the ui/fonts folder
@include font-face('text-security-square');

:root {
  /* Sidebar Foreground Colors */
  --token-side-nav-color-foreground-primary: #ffffff; /* Primary text color */
  --token-side-nav-color-foreground-strong: #e0f0eb; /* Strong foreground (e.g., active items) */
  --token-side-nav-color-foreground-faint: #9db7af; /* Faint foreground (e.g., secondary text) */

  /* Sidebar Background and Interactive Colors */
  --token-side-nav-color-surface-primary: #336d5c; /* Sidebar primary background */
  --token-side-nav-color-surface-interactive-hover: #4f8c77; /* Hover state */
  --token-side-nav-color-surface-interactive-active: #275547; /* Active state */
}
